<template>
  <div class="page welcome">
    <el-row class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
      <el-button type="primary" @click="handleToggleTheme">theme</el-button>
    </el-row>
    <el-row class="mb-4">
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </el-row>
    <div class="tools mb-4" :gutter="10">
      <el-input v-model="input" placeholder="Please input" :prefix-icon="Search" />
      <el-button :icon="Check">批量完成</el-button>
      <el-button type="primary" :icon="Refresh"></el-button>
    </div>
    <el-table
      class="mb-4"
      border
      :data="data"
      :height="256"
      table-layout="auto"
      style="width: 100%"
      @selection-change="">
      <el-table-column type="selection" />
      <el-table-column label="id" prop="id" />
      <el-table-column label="time">
        <template #default="scope">{{ scope.row.time }}</template>
      </el-table-column>
      <el-table-column prop="category" label="category" />
      <el-table-column prop="amount" label="amount" />
      <el-table-column prop="mark" label="mark" />
    </el-table>
    <el-pagination
      small
      :total="data.length"
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="pagination.pageSizes"
      :layout="pagination.layout"></el-pagination>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { ElRow, ElButton, ElInput, ElTable, ElTableColumn, ElPagination } from 'element-plus';
import { Edit, Check, Message, Star, Delete, Search, Refresh } from '@element-plus/icons-vue';

import { getBooksList } from '@/api/outlay/books';

import { useDark, useToggle } from '@vueuse/core';

const input = ref();
const pagination = reactive({
  currentPage: 1,
  pageSize: 5,
  pageSizes: [5, 10, 20, 40],
  layout: 'total, sizes, prev, pager, next, jumper',
  total: 0
});

const data = ref([]);

onMounted(async () => {
  const x: any = await getBooksList({ limit: 35 });
  console.log(x);
  data.value = x.data;
});

const isDark = useDark();
const toggleDark = useToggle(isDark);
const handleToggleTheme = () => {
  toggleDark();
};
</script>

<style lang="scss" scoped>
.page {
  .tools {
    .el-input {
      margin-right: 12px;
    }
    display: flex;
    align-items: center;
  }
}
</style>
